<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建图标</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="header" style="position: relative;">
        <div class="header-buttons-left" style="position: absolute; left: 0;">
            <button class="back-btn" onclick="window.location.href='index.html'">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                    <path d="M19 12H5M12 19l-7-7 7-7"></path>
                </svg>
                返回首页
            </button>
        </div>
        <h1>创建图标</h1>
        <div class="header-buttons-right" style="position: absolute; right: 0;">
            <button id="settings-btn" class="settings-btn" title="设置">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
                    <circle cx="12" cy="12" r="3"></circle>
                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                </svg>
                <span>设置</span>
            </button>
        </div>
    </div>
    <!-- Settings Dialog -->
    <div id="settings-dialog" class="settings-dialog">
        <div class="settings-content">
            <h2>API 设置</h2>
            <div class="form-group">
                <label for="api-key">DeepSeek API 密钥：</label>
                <input type="password" id="api-key" placeholder="输入您的 DeepSeek API 密钥">
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="simulation-mode"> 启用模拟模式
                </label>
            </div>
            <div class="dialog-buttons">
                <button id="save-settings">保存</button>
                <button id="cancel-settings">取消</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="main-content">
            <!-- 对话模式区域 -->
            <div class="chat-section">
                <h2>💬 对话模式</h2>
                <div class="chat-container" id="chat-container">
                    <div class="chat-message system">
                        <div class="message-avatar">🤖</div>
                        <div class="message-content">
                            <p>我是专业的SVG图标设计师。请描述您想要生成的SVG图标，我会为您创建精美的图标。</p>
                        </div>
                    </div>
                </div>
                <div class="chat-input-area">
                    <textarea id="chat-prompt" rows="3" placeholder="输入您的SVG图标描述..."></textarea>
                    <div class="chat-controls">
                    <div class="quantity-section">
                        <label for="chat-quantity">数量：</label>
                        <input type="number" id="chat-quantity" min="1" max="20" value="5">
                    </div>
                    <div class="style-section">
                        <div class="style-toggle">
                            <label>
                                <input type="checkbox" id="style-toggle"> 使用风格
                            </label>
                        </div>
                        <div class="style-selector" id="style-selector" style="display: none;">
                            <label for="chat-style">风格：</label>
                            <select id="chat-style">
                                <option value="像素艺术">像素艺术</option>
                                <option value="圆角填充">圆角填充</option>
                                <option value="填充方块">填充方块</option>
                                <option value="填充色彩">填充色彩</option>
                                <option value="多彩渐变">多彩渐变</option>
                                <option value="手绘草图">手绘草图</option>
                                <option value="新拟物">新拟物</option>
                                <option value="极简轮廓">极简轮廓</option>
                                <option value="渐变色彩">渐变色彩</option>
                                <option value="等距投影">等距投影</option>
                                <option value="简约线性">简约线性</option>
                                <option value="霓虹发光">霓虹发光</option>
                            </select>
                        </div>
                    </div>
                    <button id="refresh-chat-btn" style="display: none;">换一批</button>
                    <button id="send-chat-btn">发送</button>
                </div>
                </div>
            </div>
            

        </div>
        <div class="status-bar" id="status-bar">准备就绪</div>
    </div>
    <script src="script.js"></script>
</body>
</html>
</html>